<template>
  <el-dialog
    class="public-dialog"
    :title="`${isEdit ? '编辑' : '新增'}`"
    width="460"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div class="mt-[8px]" :loading="loading">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <el-form-item label="供应商" prop="supplier_id">
          <el-select-v2
            v-model="form.supplier_id"
            :options="optionsData?.supplieList || []"
            placeholder="请选择供应商"
            filterable
            class="w-[100%]"
          />
        </el-form-item>
        <el-form-item label="公司主体" prop="out_declare_company_id">
          <el-select
            v-model="form.out_declare_company_id"
            class="w-full"
            placeholder="请选择公司主体"
            filterable
          >
            <el-option
              :label="item.seller_name"
              :value="item.id"
              v-for="item in options.declareCompany"
              :key="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="指定系数" prop="sp_ratio">
          <el-input-number
            v-model="form.sp_ratio"
            placeholder="请输入"
            :controls="false"
            class="w-[100%]"
          ></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          {{ disabled ? "关闭" : "取消" }}
        </el-button>
        <el-button
          v-if="!disabled"
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { ElMessage } from "element-plus";
import { getSupplie } from "@/api/public.js";
import {
  AddSupplierDeclare,
  updateSupplierDeclare,
  supplierDeclareDetail,
} from "../../api.js";
const props = defineProps({
  id: { type: [Number, String], default: "" },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  options: { type: Object, default: () => {} },
});
const { options } = toRefs(props);
watch(
  () => props.id,
  (val) => {
    if (val) {
      getDetail(val);
    }
  }
);
const getDetail = async (id) => {
  const { data } = await supplierDeclareDetail({ id });
  form.value = data || {};
};
const optionsData = ref({});
const getSupplieList = async () => {
  const { data } = await getSupplie();
  let list = data.map((item) => {
    return {
      label: item.supplier_name,
      value: item.s_id,
    };
  });
  optionsData.value.supplieList = list || [];
};
getSupplieList();
const form = ref({
  supplier_id: null,
  sp_ratio: null,
  out_declare_company_id: [],
});
const rules = reactive({
  supplier_id: [
    {
      required: true,
      message: "供应商不能为空!",
      trigger: "change",
    },
  ],
  sp_ratio: [
    {
      required: true,
      message: "系数不能为空!",
      trigger: "blur",
    },
  ],
  out_declare_company_id: [
    { required: true, message: "公司主体不能为空!", trigger: "change" },
  ],
});
const emit = defineEmits(["update:modelValue", "refresh", "close"]);
const isEdit = computed(() => !!props.id);
const formRef = ref();
const loading = ref(false);
const handleSave = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (props?.id
          ? updateSupplierDeclare
          : AddSupplierDeclare)(form.value);
        if (code !== 200) return ElMessage.warning(message);
        ElMessage.success(props?.id ? "编辑成功" : "添加成功");
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};

const handleClose = async (refresh) => {
  form.value = {
    supplier_id: null,
    sp_ratio: null,
    out_declare_company_id: [],
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
